<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#FFFFFF" back-icon-color="#FFF"
			:is-fixed="isFixed" :is-back="isBack" 
			:background="background" 
			:back-text-style="{color: '#FFF'}" :title="title" 
			:back-icon-name="backIconName" :back-text="backText"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="navbar-right">
					<view class="message-box right-item" @click="AddBtn">
						<u-icon name="plus" color="#ffffff" size="38"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="content">
			<u-form :model="memberForm" ref="uForm">
				<u-form-item label-width="120" :label-position="labelPosition" label="姓名" prop="memberName">
					<u-input :border="border" placeholder="请输入姓名" v-model="memberForm.memberName" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="120" :label-position="labelPosition" label="公司简称" prop="nickName">
					<u-input :border="border" placeholder="请输入公司简称" v-model="memberForm.nickName" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="120" :label-position="labelPosition" label="联系方式" prop="contact">
					<u-input :border="border" placeholder="请输入联系方式" v-model="memberForm.contact" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="港口" label-width="150" prop="portName">
					<u-checkbox-group @change="checkPortGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-checkbox v-model="item.checked" v-for="(item, index) in portNameOptions" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="角色" label-width="150" prop="likeFruit">
					<u-checkbox-group @change="checkRoleGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-checkbox v-model="item.checked" v-for="(item, index) in roleNameOptions" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			<!-- 	<u-form-item label-width="120" :label-position="labelPosition" label="车队名" prop="teamName">
					<u-input :border="border" placeholder="请输入车队名" v-model="memberForm.teamName" type="text"></u-input>
				</u-form-item> -->
				<u-form-item v-if="false" :label-position="labelPosition" label="上传图片" prop="photo" label-width="120">
					<u-upload width="160" height="160"></u-upload>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="footer-btn">
			<u-button type="success" @click="submitUser">确定</u-button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import plateNumber from '@/components/plate-number/plateNumber.vue'
	
	export default {
		data() {
			return {
				title: '信息补充',
				backText: null,
				backIconName: 'nav-back',
				useSlot: false,
				background: {
					backgroundColor: '#2979ff',
				},
				isBack: true,
				custom: true,
				isFixed: true,
				modalShow: false,
				memberForm: {
					memberName: '', // 姓名
					contact: '',  // 手机号
					openid: '',
					wxid: '',
					portName: '', // 港口
					roleName: '', // 角色
					status: 0,
					nickName: '',
					regDate: '',
					syncStatus: 0,
					teamName: ''
				},
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				portNameOptions: [{name: '中林如皋港', checked: false},
				{name: '苏中国际', checked: false},{name: '长源国际', checked: false},
				{name: '大丰港', checked: false},{name: '盐城亭湖港', checked: false},
				{name: '亨通港务', checked: false},{name: '武汉经开港', checked: false},
				{name: '福莱特', checked: false}],
				roleNameOptions: [{name: '船公司', checked: false},{name: '船代', checked: false},{name: '车队', checked: false},{name: '司机', checked: false},{name: '港口', checked: false},,{name: '访客', checked: false}],
				submitStatus: false,  // 提交状态
				baseUrl: 'http://localhost:9051'
			}
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			submitUser () {
				if (!this.checkRegInfo()) {
					return
				}
				if (this.submitStatus) {
					return
				} else {
					this.submitStatus = true
				}
				console.log(this.memberForm)
				// this.$http.request(this.$httpApi.cloudPortUrl.regMember, this.memberForm)
				uni.request({
					url: 'https://api.zlkj-port.com/prod-api/user/reg',
					method:'post',
					data: this.memberForm,
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						if (res.data.code == 1) {
							this.$store.commit('loginSuccess', {
								userInfo: res.data
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabbar/tabbar-5/tabbar-5'
								})
								// uni.navigateTo({
								// 	url: '/pages/login/login'
								// })
							}, 500)
							this.$refs.uToast.show({
								title: '注册成功',
								type: 'success'
							})
						} else {
							this.$refs.uToast.show({
								title: '注册失败',
								type: 'error'
							})
							this.submitStatus = false
						}
					}
				})
				// .then(res => {
				// 	if (res.code == 1) {
				// 		this.$store.commit('loginSuccess', {
				// 			userInfo: res.data
				// 		})
				// 		setTimeout(() => {
				// 			uni.reLaunch({
				// 				url: '/pages/tabbar/tabbar-5/tabbar-5'
				// 			})
				// 		}, 1500)
				// 		this.$refs.uToast.show({
				// 			title: res.message,
				// 			type: 'success'
				// 		})
				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: '注册失败',
				// 			type: 'error'
				// 		})
				// 		this.submitStatus = false
				// 	}
				// })
			},
			checkRegInfo () {
				let checkInfoStatus = true
				let msg = ''
				if (this.memberForm.memberName == '') {
					checkInfoStatus = false
					msg = '姓名不得为空'
				}
				if (this.memberForm.contact == '') {
					checkInfoStatus = false
					msg = '联系方式不得为空'
				}
				if (this.memberForm.portName == '') {
					checkInfoStatus = false
					msg = '港口选择不得为空'
				}
				if (this.memberForm.roleName == '') {
					checkInfoStatus = false
					msg = '角色选择不得为空'
				}
				if (!checkInfoStatus) {
					this.$refs.uToast.show({
						title: msg,
						type: 'error'
					})
				}
				return checkInfoStatus
			},
			checkPortGroupChange (e) {
				this.memberForm.portName = e.join(',')
			},
			checkRoleGroupChange (e) {
				this.memberForm.roleName = e.join(',')
			}
		},
		onLoad (options) {
			this.memberForm.openid = options['openid']
			this.memberForm.contact = options['phone']
			// this.memberForm.wxid = options['wxid']
			// this.memberForm.nickName = options['nickName'] 
			// this.memberForm.memberName = options['nickName']  
		}
	}
</script>

<style lang="scss">

	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		margin-left: auto;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
		font-size: 30rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.content {
		padding: 40upx 20upx 0;
	}
	
	.car-item {
		display: flex;
		align-items: center;
		padding: 20upx;
		background-color: #ffffff;
		margin-bottom: 20upx;
		.car-item-text {
			min-width: 0;
			flex: 1;
			text-align: center;
		}
		.car-line {
			width: 30upx;
			text-align: center;
		}
		.car-item-btn {
			width: 50upx;
			text-align: center;
		}
	}
	
	.add-car-modal {
		background-color: #ffffff;
		padding: 80upx 10upx 20upx;
		.car-text {
			border: 1px solid #5e5e5e;
			margin-bottom: 20upx;
			height: 80upx;
		}
	}
	
	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
